<script setup lang="ts">
import  logo from '@/assets/logo.png'
import { useAudioPlayerStore,usePlayerViewStore } from '@/stores'
const audioStore = useAudioPlayerStore()
const MusicPlayerView = usePlayerViewStore()
const handleShowPlayer = ()=>{
  MusicPlayerView.show = ! MusicPlayerView.show
}

</script>

<template>
<div @click="handleShowPlayer">
  <el-image  :src="audioStore.playingSong && audioStore.playingSong.album_cover !== null ? audioStore.playingSong.album_cover : logo" fit="cover" />
</div>
</template>

<style lang="scss" scoped>
.el-image{
  width: 40px;
  height: 40px;
  border-radius: 3px;
  position: relative;
  cursor: pointer;

  &::after{
    content: '';
    display: block;
    background: url('@/assets/res/playBarCloseSingleSong@2x.png') center center no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
    z-index: 300;
    height: 40px;
    width: 40px;
  }

  &:hover{
    &::after{
      display: block;
      opacity: 0.6;
    }

  }

  img{
    position: relative;
    z-index: 122;

  }

}
</style>